<template>
  <MainLayout>
    <router-view></router-view>
    <div class="file-management">
      <h2>文件管理</h2>
      
<!-- 搜索 -->
<!-- <el-form> 组件，它是 Element UI 提供的表单组件， :inline="true" 表示将表单元素排列在一行， class="add-menu-form" 为表单添加了自定义类名 -->
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item v-if="!isNoShowAdvancedSearch" >
          <el-input v-model="filesSearch.originFileName" placeholder="请输入文件名" />
        </el-form-item>
        <el-form-item>
          <template v-if="isNoShowAdvancedSearch">
            <!-- - <el-row> 是 Element UI 的行组件， :gutter="20" 表示列与列之间的间距为 20 像素。
            <el-col> 是列组件， :span="6" 表示该列占据 6 个栅格（Element UI 栅格系统共 24 个栅格）。 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="文件名" :label-width="70">
                  <el-input v-model="filesSearch.type" placeholder="请输入文件名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类型" :label-width="70">
                  <el-input v-model="filesSearch.type" placeholder="请输入文件类型" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="大小" :label-width="70">
                  <el-input v-model="filesSearch.size" placeholder="请输入文件大小" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="文件MD5" :label-width="70">
                  <el-input v-model="filesSearch.md5" placeholder="请输入文件MD5" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="URL" label-width="70">
                  <el-input v-model="filesSearch.url" placeholder="请输入文件URL" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间" :label-width="70">
                  <el-input v-model="filesSearch.createTime" placeholder="请输入创建时间" />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <!-- 修改为添加一个包裹按钮的 div -->
          <div class="button-group">
            <el-button type="primary" @click="onSearch">搜索</el-button>
            <el-button type="" style="width: 80px;" @click="isNoShowAdvancedSearch = !isNoShowAdvancedSearch">
              {{ isNoShowAdvancedSearch ? '收起' : '高级搜索' }}
            </el-button>
            <el-button type="primary" @click="resetSearch">重置</el-button>
            <el-button type="success" @click="exportFiles">导出</el-button>
            <el-button type="success" @click="$refs.fileInput.click()">导入</el-button>
            <el-button type="danger" @click="batchDeleteFiles">批量删除</el-button>
          </div>
        </el-form-item>
      </el-form>

<!-- 列表 -->
      <el-table 
        :data="files" 
        style="width: 100%;" 
        @selection-change="handleCurrentChange" 
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="originFileName" label="文件名">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.originFileName }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.type }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="大小">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.size }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="md5" label="文件MD5">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.md5 }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="URL">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.url }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间">
          <template #default="scope">
            <div class="ellipsis">{{ scope.row.createTime }}</div>
          </template>
        </el-table-column>
        <!-- <template #default="scope"> 标签  这是一个作用域插槽， #default 表示默认插槽， scope 是一个对象，包含了当前行的数据信息。通过这个插槽，可以自定义该列每一行的显示内容。-->
        <el-table-column  label="操作" windth="180">
          <template #default="scope">
            <el-button size="small" type="danger" @click.stop="deleteFile(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

<!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        :current-page="currentPage"
        @current-change="handlePageChange"
      />

    </div>
  </MainLayout>
</template>

<script>
import MainLayout from '@/layouts/MainLayout.vue';

export default {
  components: { MainLayout },
  data() {
    return {
      files: [], // 文件列表数据
      selectedFiles: [], // 选中的文件数据
      filesDetail: {}, 
      isViewingDetail: false, // 详情属性状态
      currentPage: 1,
      pageSize: 10,
      queryFiles: {
        originFileName: '', // 文件名
        type: '', // 类型
        size: '', // 大小
        md5: '', // 文件MD5
        url: '', // url
        createTime: '' // 创建时间
      },
      isNoShowAdvancedSearch: false,
      filesSearch: {
        originFileName: '', // 文件名
        type: '', // 类型
        size: '', // 大小
        md5: '', // 文件MD5
        url: '', // url
        createTime: '' // 创建时间
      }
    }
  },
  computed: {},
  methods: {
    // 表格变化选择
    handleCurrentChange(selection) { 
      this.selectedFiles = selection; // 更新选中的文件数据
    },
    //选择数据行
    handleRowClick(row) { 
      this.filesDetail = row;
      this.isViewingDetail = true;
    },

    // 分页方法
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchFiles();
    },

    // 获取文件数据
    async fetchFiles() {
      try {
        // 修正接口地址引号问题
        const response = await fetch('http://localhost:8090/files-fragmentation/P', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            pageNo: this.currentPage,
            pageSize: this.pageSize,
            originFileName: this.queryFiles.originFileName,
            type: this.queryFiles.type,
            size: this.queryFiles.size,
            md5: this.queryFiles.md5,
            url: this.queryFiles.url,
            createTime: this.queryFiles.createTime
          })
        });

        const data = await response.json();
        console.log('文件API 响应数据:', data); // 添加调试日志
        if (data.code == 200) {
          this.files = data.data.records;
          this.total = data.data.total;
        } else {
          this.$message.error(`获取文件数据失败: ${data.message}`);
        }
      } catch (err) {
        console.error('获取文件数据失败:', err);
        this.$message.error('获取文件数据失败，请检查网络连接');
      }
    },

    // 删除文件(单)
    async deleteFile(id) {
      try {
        const response = await fetch(`http://localhost:8089/files-fragmentation/delete/${id}`, { method: 'GET' });
        const data = await response.json();

        if (data.code == 200) {
          this.files = this.files.filter(file => file.id !== id); // 从列表中移除已删除的文件
          this.$message.success('文件删除成功');
         }else {
          this.$message.error(`文件删除失败: ${data.message}`);
        }
      } catch (err) {
        console.error('文件删除失败:', err);
        this.$message.error('文件删除失败，请检查网络连接');
      }
    },

    // 搜索方法
    onSearch() {
      // 将搜索条件赋值给查询参数
      this.queryFiles = { ...this.filesSearch };
      // 重置当前页码为 1
      this.currentPage = 1;
      // 重新获取文件数据
      this.fetchFiles();
    },

    // 重置方法
    resetSearch() {
      // 清空搜索条件
      this.filesSearch = {
        originFileName: '',
        type: '',
        size: '',
        md5: '',
        url: '',
        createTime: ''
      };
      // 清空查询参数
      this.queryFiles = { ...this.filesSearch };
      // 重置当前页码为 1
      this.currentPage = 1;
      // 重新获取文件数据
      this.fetchFiles();
    },

    // 导出方法（示例，需根据实际接口调整）
    async exportFiles() {
      try {
        const response = await fetch('http://localhost:8090/files-fragmentation/export', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            originFileName: this.queryFiles.originFileName,
            type: this.queryFiles.type,
            size: this.queryFiles.size,
            md5: this.queryFiles.md5,
            url: this.queryFiles.url,
            createTime: this.queryFiles.createTime
          })
        });
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'files_export.xlsx';
        a.click();
        window.URL.revokeObjectURL(url);
        this.$message.success('文件导出成功');
      } catch (err) {
        console.error('文件导出失败:', err);
        this.$message.error('文件导出失败，请检查网络连接');
      }
    },

    // 导入方法（示例，需根据实际接口调整）
    async importFiles(file) {
      try {
        const formData = new FormData();
        formData.append('file', file);
        const response = await fetch('http://localhost:8090/files-fragmentation/import', {
          method: 'POST',
          body: formData
        });
        const data = await response.json();
        if (data.code === 200) {
          this.$message.success('文件导入成功');
          // 重新获取文件数据
          this.fetchFiles();
        } else {
          this.$message.error(`文件导入失败: ${data.message}`);
        }
      } catch (err) {
        console.error('文件导入失败:', err);
        this.$message.error('文件导入失败，请检查网络连接');
      }
    },

    // 批量删除方法
    async batchDeleteFiles() {
      if (this.selectedFiles.length === 0) {
        this.$message.warning('请选择要删除的文件');
        return;
      }
      try {
        const ids = this.selectedFiles.map(file => file.id);
        const response = await fetch('http://localhost:8089/files-fragmentation/batchDelete', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ ids })
        });
        const data = await response.json();
        if (data.code === 200) {
          this.files = this.files.filter(file => !ids.includes(file.id));
          this.$message.success('文件批量删除成功');
        } else {
          this.$message.error(`文件批量删除失败: ${data.message}`);
        }
      } catch (err) {
        console.error('文件批量删除失败:', err);
        this.$message.error('文件批量删除失败，请检查网络连接');
      }
    }


  },
  mounted() {
    this.isMounted = true;
    this.fetchFiles(); // 页面加载时获取文件数据
  },
  beforeUnmount() {
    this.isMounted = false;
  }
};
</script>

<style scoped>
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 添加按钮组样式 */
.button-group {
  display: flex;
  gap: 10px; /* 按钮之间的间距 */
  align-items: center;
}

/* 可以根据需要调整按钮的样式 */
.button-group .el-button {
  min-width: 100px; /* 按钮最小宽度 */
}
</style>
